<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>京东商城 - 付款</title>
    <link rel="stylesheet" href="./../css/style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    />
    <style>
      /* Payment container styling */
      .payment-container {
        width: 80%;
        margin: 30px auto;
        background: #fff;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px; /* Added rounded corners */
      }
      /* Payment header styling */
      .payment-header {
        border-bottom: 1px solid #e6e6e6;
        padding-bottom: 15px;
        margin-bottom: 20px;
      }
      /* Payment header title styling */
      .payment-header h2 {
        color: #e4393c;
        font-size: 24px;
      }
      /* Payment content layout */
      .payment-content {
        display: flex;
        margin-bottom: 30px;
        flex-direction: column; /* Changed to column for better stacking */
        align-items: center; /* Center content horizontally */
      }
      /* Product information section */
      .product-info {
        display: flex;
        align-items: center;
        margin-bottom: 20px; /* Space below product info */
        width: 100%; /* Take full width */
        max-width: 600px; /* Limit width for better readability */
        justify-content: center; /* Center product info */
      }
      /* Product image styling */
      .product-image {
        width: 120px;
        height: 120px;
        margin-right: 20px;
        border: 1px solid #eee;
        object-fit: cover;
        border-radius: 4px; /* Added rounded corners */
      }
      /* Product details styling */
      .product-details {
        flex: 1;
      }
      /* Product title styling */
      .product-title {
        font-size: 18px;
        margin-bottom: 10px;
      }
      /* Product price styling */
      .product-price {
        color: #e4393c;
        font-size: 24px;
        font-weight: bold;
      }
      /* Payment methods section */
      .payment-methods {
        margin-top: 30px;
      }
      /* Individual payment method styling */
      .payment-method {
        margin-bottom: 15px;
        padding: 15px;
        border: 1px solid #eee;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        display: flex;
        align-items: center;
      }
      /* Payment method hover effect */
      .payment-method:hover {
        border-color: #e4393c;
      }
      /* Selected payment method styling */
      .payment-method.selected {
        border-color: #e4393c;
        background: #fff9f9;
      }
      /* Payment method icon styling */
      .payment-method i {
        margin-right: 10px;
        font-size: 24px;
        color: #e4393c;
      }
      /* QR code section styling */
      .qr-code-section {
        text-align: center;
        margin-top: 30px;
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      }
      /* QR code image styling */
      .qr-code-section img {
        width: 250px; /* Adjusted size for direct display */
        height: 250px; /* Adjusted size for direct display */
        margin: 15px auto;
        border: 1px solid #eee;
        border-radius: 4px;
      }
      /* Total amount display */
      .total-amount {
        font-size: 28px;
        font-weight: bold;
        color: #e4393c;
        margin-top: 20px;
        text-align: center;
      }
      /* Confirmation buttons section */
      .confirm-payment {
        margin-top: 30px;
        text-align: center; /* Center buttons */
      }
      /* Confirm button styling */
      .confirm-btn,
      .cancel-btn,
      .issue-btn {
        background: #e4393c;
        color: white;
        border: none;
        padding: 12px 30px;
        font-size: 18px;
        cursor: pointer;
        border-radius: 4px;
        margin: 0 10px; /* Spacing between buttons */
        transition: background 0.3s;
      }
      /* Confirm button hover effect */
      .confirm-btn:hover {
        background: #c91623;
      }
      /* Cancel button styling */
      .cancel-btn {
        background: #666;
      }
      /* Cancel button hover effect */
      .cancel-btn:hover {
        background: #555;
      }
      /* Issue button styling */
      .issue-btn {
        background: #f0ad4e;
      }
      /* Issue button hover effect */
      .issue-btn:hover {
        background: #ec971f;
      }

    </style>
  </head>
  <body>
    <!-- Top navigation bar (can be copied from index.html) -->
    <div class="topbar">
      <div class="container flclear">
        <div class="welcome flleft">
          <a href="login.html" class="hello">你好，请登录</a>
        </div>
        <ul class="list flright">
          <li><a href="#">我的订单</a></li>
          <li><span class="separate">|</span></li>
          <li><a href="#">我的京东</a></li>
          <li><span class="separate">|</span></li>
          <li><a href="#">京东会员</a></li>
          <li><span class="separate">|</span></li>
          <li><a href="#">企业采购</a></li>
          <li><span class="separate">|</span></li>
          <li><a href="#">客户服务</a></li>
          <li><span class="separate">|</span></li>
          <li><a href="#">网站导航</a></li>
          <li><span class="separate">|</span></li>
          <li><a href="#">手机京东</a></li>
        </ul>
      </div>
    </div>

    <!-- Main content area -->
    <div class="payment-container">
      <div class="payment-header">
        <h2>收银台</h2>
      </div>

      <div class="payment-content">
        <div class="product-info">
          <img id="product-img" src="" alt="商品图片" class="product-image" />
          <div class="product-details">
            <h3 id="product-title" class="product-title"></h3>
            <p id="product-price" class="product-price"></p>
          </div>
        </div>

        <!-- QR Code Section -->
        <div class="qr-code-section">
            <h3>扫描二维码支付</h3>
            <img src="../img/剑星.png" alt="支付二维码">
            <p class="countdown" id="countdown">请在30分钟内完成支付</p>
        </div>

        <!-- Total Amount Display -->
        <div class="total-amount">
            应付总额：<span id="final-price">¥ 0.00</span>
        </div>
      </div>

      <div class="payment-methods">
        <h3>选择支付方式</h3>

        <div class="payment-method selected">
          <i class="fas fa-wallet"></i>
          <span>京东钱包</span>
        </div>

        <div class="payment-method">
          <i class="fas fa-credit-card"></i>
          <span>银行卡支付</span>
        </div>

        <div class="payment-method">
          <i class="fab fa-weixin"></i>
          <span>微信支付</span>
        </div>

        <div class="payment-method">
          <i class="fab fa-alipay"></i>
          <span>支付宝</span>
        </div>
      </div>

      <div class="confirm-payment">
        <button class="confirm-btn" id="confirmPaymentBtn">确认支付</button>
        <button class="cancel-btn" id="cancelPaymentBtn">取消支付</button>
        <button class="issue-btn" id="paymentIssueBtn">支付遇到问题</button>
      </div>
    </div>

    <!-- Footer (can be copied from index.html) -->
    <div class="footer flclear">
      <div class="container top flclear">
        <dl class="flleft">
          <dt><span>购物指南</span></dt>
          <dd><a href="#">购物流程</a></dd>
          <dd><a href="#">会员介绍</a></dd>
          <dd><a href="#">生活旅行/团购</a></dd>
          <dd><a href="#">常见问题</a></dd>
          <dd><a href="#">大家电</a></dd>
          <dd><a href="#">联系客服</a></dd>
        </dl>
        <dl class="flleft">
          <dt><span>配送方式</span></dt>
          <dd><a href="#">上门自提</a></dd>
          <dd><a href="#">211限时达</a></dd>
          <dd><a href="#">配送服务查询</a></dd>
          <dd><a href="#">配送费收取标准</a></dd>
          <dd><a href="#">海外配送</a></dd>
        </dl>
        <dl class="flleft">
          <dt><span>支付方式</span></dt>
          <dd><a href="#">货到付款</a></dd>
          <dd><a href="#">在线支付</a></dd>
          <dd><a href="#">分期付款</a></dd>
          <dd><a href="#">公司转账</a></dd>
        </dl>
        <dl class="flleft">
          <dt><span>售后服务</span></dt>
          <dd><a href="#">售后政策</a></dd>
          <dd><a href="#">价格保护</a></dd>
          <dd><a href="#">退款说明</a></dd>
          <dd><a href="#">返修/退换货</a></dd>
          <dd><a href="#">取消订单</a></dd>
        </dl>
        <dl class="flleft">
          <dt><span>特色服务</span></dt>
          <dd><a href="#">夺宝岛</a></dd>
          <dd><a href="#">DIY装机</a></dd>
          <dd><a href="#">延保服务</a></dd>
          <dd><a href="#">京东E卡</a></dd>
          <dd><a href="#">京东通信</a></dd>
          <dd><a href="#">京东服饰</a></dd>
        </dl>
        <div class="code flright">
          <span>京东客户端</span>
          <img src="../img/剑星.png" alt="客户端二维码" />
        </div>
      </div>
      <div class="container bottom flclear">
        <div>
          <a href="#">关于我们</a> <span class="separate">|</span>
          <a href="#">联系我们</a> <span class="separate">|</span>
          <a href="#">联系客服</a> <span class="separate">|</span>
          <a href="#">合作招商</a> <span class="separate">|</span>
          <a href="#">商家帮助</a> <span class="separate">|</span>
          <a href="#">营销中心</a> <span class="separate">|</span>
          <a href="#">手机京东</a> <span class="separate">|</span>
          <a href="#">友情链接</a> <span class="separate">|</span>
          <a href="#">销售联盟</a> <span class="separate">|</span>
          <a href="#">京东社区</a> <span class="separate">|</span>
          <a href="#">风险监测</a> <span class="separate">|</span>
          <a href="#">隐私政策</a> <span class="separate">|</span>
          <a href="#">京东公益</a> <span class="separate">|</span>
          <a href="#">English Site</a> <span class="separate">|</span>
          <a href="#">Media & IR</a>
        </div>
        <div>
          <span>©2004-2025 京东JD.com 版权所有</span>
        </div>
      </div>
    </div>

    <script>
  // 获取URL查询参数的方法
  function getQueryParam(name) {
    // 使用URLSearchParams解析当前URL的查询参数
    const urlParams = new URLSearchParams(window.location.search);
    // 返回指定参数名的值
    return urlParams.get(name);
  }

  // 页面加载完成后执行
  window.onload = function () {
    // 从URL获取商品参数
    const imgSrc = getQueryParam("img");    // 商品图片路径
    const title = getQueryParam("title");   // 商品标题
    const price = getQueryParam("price");   // 商品价格

    // 设置商品展示信息
    document.getElementById("product-img").src = "../img/" + imgSrc;  // 设置商品图片
    document.getElementById("product-title").textContent = title;    // 设置商品标题
    document.getElementById("product-price").textContent = "¥ " + price;  // 显示商品价格
    document.getElementById("final-price").textContent = "¥ " + price;   // 设置最终支付价格

    // 支付方式选择逻辑
    const paymentMethods = document.querySelectorAll(".payment-method");
    paymentMethods.forEach((method) => {
      // 为每个支付方式添加点击事件
      method.addEventListener("click", function () {
        // 先移除所有支付方式的选中状态
        paymentMethods.forEach((m) => m.classList.remove("selected"));
        // 为当前点击的支付方式添加选中状态
        this.classList.add("selected");
      });
    });

    // "确认支付"按钮点击事件
    document.getElementById("confirmPaymentBtn").addEventListener("click", function() {
        // 实际应用中这里会触发真实的支付流程
        // 演示中仅显示支付成功提示并跳转
        alert("支付成功！感谢您的购买。");  // 使用alert模拟支付成功提示
        window.location.href = "index.html"; // 跳转回首页
    });

    // "取消支付"按钮点击事件
    document.getElementById("cancelPaymentBtn").addEventListener("click", function() {
        alert("支付已取消。");  // 支付取消提示
        window.location.href = "index.html"; // 跳转回首页
    });

    // "支付遇到问题"按钮点击事件
    document.getElementById("paymentIssueBtn").addEventListener("click", function() {
        alert("请联系客服寻求帮助。");  // 显示客服帮助提示
        // 实际应用中可能会打开客服聊天窗口或联系表单
    });
  };
</script>
  </body>
</html>
